<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/xml" prefix="x"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>G305实验室交流平台</title>
<meta name="Keywords" content="g305">
<meta name="Description" content="g305实验室交流平台">

<script type="text/javascript" src="../../static/jquery/js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="../../static/jquery/js/jquery-ui-1.8.23.custom.min.js"></script>
<link rel="stylesheet" type="text/css" href="../../static/jquery/css/ui-lightness/jquery-ui-1.8.23.custom.css">

<link rel="stylesheet" href="../../static/css/footer.css"
	type="text/css">

<style type="text/css">
body {
	margin: 0;
	padding: 0;
	text-align: center;
	color: #2B2B2B;
	font: 12px/1.75 Arial, sans-serif, 宋体b8b\4f53;
}

input[type=text]:focus,input[type=password]:focus,textarea:focus{
	 transition:border linear .2s,box-shadow linear .5s;
	 -moz-transition:border linear .2s,-moz-box-shadow linear .5s;
	 -webkit-transition:border linear .2s,-webkit-box-shadow linear .5s;
	 outline:none;
	 border-color:#248ef4;
	 box-shadow:0 0 8px #248ef4;
	 -moz-box-shadow:0 0 8px  #248ef4;;
	 -webkit-box-shadow:0 0 8px #248ef4;
 }
 
.banner {
	border-bottom: 1px solid #C5C5C5;
	box-shadow: 0 2px 0 rgba(0, 0, 0, 0.12);
	-moz-box-shadow: 0 0 2px #666;
	-webkit-box-shadow: 0 0 2px #666;
	height: 36px;
	width: 100%;
	position: fixed;
	_position: absolute;
	z-index: 100;
	padding-bottom:10px;
	top: 0;
	left: 0;
	background-color: #248ef4;
}


.banner-sub {
	text-align:left;
	height: 33px;
	width: 960px;
	position: relative;
	z-index: 21;
	color: #ffffff;
}

.banner-sub li {
	list-style-type: none;
	display: inline;
	float: left;
	margin-right: 5px;
	padding-bottom: 2px;
}
.banner .login{
	font-size: 10px;
	font-weight: normal;
}

.banner-sub span{
	vertical-align:middle;
	display:inline-block;
	height: 20px; 
}
.banner-sub input{
	width: 120px;
	height: 15px; 
	vertical-align: bottom;
	
}
.banner-sub a:link,.banner-sub a:visited{
	text-decoration: none;
	color: #ffffff;
	font-size: 16px;
}


.movie {
	margin-top: 36px;
}

.movie img{
	width: 50px;
	height: 50px;
}
.movie .left{
	float: left;
}
.movie .right{
	float: right;
}

.main {
	clear:both;
	margin-bottom: 100px;
}
.main .err_msg{
	color: red;
	
}
.main .err_msg a:link,.main .err_msg a:visited{
	text-decoration: none;
	color: #248ef4;
}
.main .main_bar{
	font-size: 24px;
	color: #248ef4;
	
	
}
.main .main_sub{
	text-align:center;
	margin: 0 auto;
	width: 400px;
	border: 1px solid  #248ef4;
	vertical-align: middle;
}

.main_sub .left{
	height: inherit;
	float: left;
	padding-top: 50px;
	margin-left: -60px;
	

}



.link,.linkbar {
	clear: both;
	padding: 5px;
	text-align: center;
	background: #e5eecc;
	border: solid 1px #c3c3c3;
	
}
.linkbar{
	font-size: 16px;
	color: #248ef4;
}
 .link li{
	list-style-type:  none;
	height: 30px;
}
 .link span{
	display: inline-block;
	margin-right: 5px;
}

 .link .item{
	margin-right: 5px;
}
 .linkbar{
	font-size: 16px;
	color: #248ef4;
	font-weight:  bold;
}
.link  .category{
	font-size: 12px;
	color: red;
	font-weight:  bold;
}
.link a:link,.link a:visited{
	color: blue;
	text-decoration: none;
}

</style>

<!-- 登录页面 -->
<style type="text/css">
  
  	#login{
  		font-size: 16px;
  		margin: 0px;
  		padding: 0px;
  	}
  	#login ul li{
  		 list-style:  none;
  		 height: 50px;
  		 width: 500px;
  		 margin: 0px auto;
  	}
  	#login .errmsg{
  		color: red;
  	}
  	#login .label {
  		display:inline-block;
		width:100px;
		margin-right: 5px;
	}

	#login input{
		display:inline-block;
		width:200px;
		height: 20px; 
		margin-right: 5px;
	}
	#login  .star {
		display:inline-block;
  		font-weight: bold;
  		color: red;
	}
	
  </style>
</head>
<body>
	<%
		String err_msg=(String)request.getAttribute("err_msg");
		String email=(String)request.getAttribute("email");
		if(err_msg==null)
			err_msg="";
		if(email==null)
			email="";
	%>
	<div id="wraper">
	
		<div class="banner">
			<div class="banner-sub">
				<form action="/user/login.do" method="post">
					<ul>
						<li>
							<span>邮箱：<input type="text" name="email" class="email"/></span>
						</li>
						<li>
							<span>密码：<input type="password" name="password" class="password"/></span>
						</li>
						<li>
							<span class="login">登录</span>
						</li>
						<li>
							<span class="register"><a id="register_btn" href="#">注册</a></span>
						</li>
					</ul>
				</form>
			</div>
		</div>
	

			<div class="movie">
				<span class="left"><img alt="G305光环"src="../../static/img/progress_bar.gif" > </span>
				<span class="right"><img  alt="G305光环" src="../../static/img/progress_bar.gif" ></span>
			</div>

			<div class="main">
				<div class="main_bar">
					用户登录
				</div>
				<div class="err_msg"><%=err_msg %></div>
				<div class="main_sub">
					<div class="left">
						<div class="login_btn">Go</div>
					</div>
					<!-- 登录页面 -->
					<div id="login" title="用户登录">
						<form action="/user/login_by_email.do" method="post" id="login_form">
								<ul>
									<li>
										<span class="label">邮箱:</span>
										<span class="input"><input type="text" name="email" class="email" value="<%=email%>"></span>
										<span class="star img_email">*</span>
									</li>
									<li>
										<span class="label">密码:</span>
										<span class="input"><input type="password" name="password" class="password"></span>
										<span class="star img_password">*</span>
									</li>
								</ul>
					     </form> 
					</div>
				</div>
			</div>


			<div class="linkbar">网站导航</div>
			<div class="link" style="display: none;">
				<ul>
					<c:import url="/xml/navication.xml" var="xml" charEncoding="UTF-8"></c:import>
					<x:parse doc="${xml}" var="list" scope="page"></x:parse>
					<x:forEach var="class" select="$list/items/class">
						<li>
							<span class="category"><x:out select="$class/@id" /></span>
							<x:forEach var="item" select="$class/item">
								<span class="item">
									<a href="<x:out select="$item/url" />" target="_blank"><x:out select="$item/name" /></a>
								</span>
							</x:forEach>
						</li>
					</x:forEach>
				</ul>
			</div>
		
		<div class="footer">
				<ul>
					<li><a href="#">关于我们</a></li>
					<li><a href="#">招贤纳士</a></li>
					<li><a href="#">联系方式</a></li>
					<li><a href="#">版权声明</a></li>
					<li><a href="#">广告服务</a></li>
				</ul>
			</div>
	</div>


	
<script type="text/javascript">
	function google() {
		var str = document.getElementById("google").value;
		window.location.href = "http://www.google.com.hk/search?q=" + str;
	}
	function baidu() {
		var str = document.getElementById("baidu").value;
		window.location.href = "http://www.baidu.com/s?wd=" + str;
	}


	$(document).ready(function() {
		$(".link").slideDown("slow");
		$("#google_btn").button();
		$("#baidu_btn").button();
		$(".banner .login").button();
		$("#register_btn").click(function(){
			window.location.href="/user/register_view.do";
		});
		$(".main .login_btn").click(function(){
			$(".main .err_msg").html("");
			var flag=_login_checkAll();
			if(flag)
				$(".main").hide("slide",5000,function(){
					$("#login_form").submit();	
				});
		});
		$(".banner .login").click(function(){
			$("#login .email").attr("value",$(".banner .email").attr("value"));
			$("#login .password").attr("value",$(".banner .password").attr("value"));
			 $(".main_sub .login_btn").click();
		});
	});
</script>
<!-- 登录 -->
  <script type="text/javascript">
  $(document).ready(function() {
    $("#login .email").blur(function(){
    	_login_check_email($(this).val());
    });
    $("#login .password").blur(function(){
    	_login_check_password($(this).val());
    });
    $(".main_sub .login_btn").button();
    
   
  });
	function _login_check_email(str) {
		flag=true;
		if (str==undefined||str==null||str == ""){
			$("#login .img_email").html( "<img src=\"../../../static/img/check_error.png\" align=\"middle\">邮箱不能为空");
			flag=false;
		}else{
			var patten = new RegExp(/^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]+$/);
			flag=patten.test(str);
			if(flag)
				$("#login .img_email").html( "<img src=\"../../../static/img/check_success.png\" align=\"middle\">");
			else
				$("#login .img_email").html( "<img src=\"../../../static/img/check_error.png\" align=\"middle\">邮箱格式有误");
		}
		
		return flag;
	}
	function _login_check_password(str) {
		flag=true;
		if (str==undefined||str==null||str == ""){
			$("#login .img_password").html( "<img src=\"../../../static/img/check_error.png\" align=\"middle\">密码不能为空");
			flag=false;
		}else if(str.length<1){
			$("#login .img_password").html( "<img src=\"../../../static/img/check_error.png\" align=\"middle\">密码最少为3个字符");
			flag=false;
		}else{
			$("#login .img_password").html( "<img src=\"../../../static/img/check_success.png\" align=\"middle\">");
		}
		
		return flag;
	}
	
	function _login_checkAll() {
		var flag=_login_check_email($("#login .email").val());
		if(flag)
			flag=_login_check_password($("#login .password").val());
		return flag;
	}
	function _login(){
		var flag=_login_checkAll();
		if(flag)
			$("#login_form").submit();	
	}
  </script>

</body>
</html>